<template>
	<view>
		<dsl-navbar title="详情" bgTopImg='white' isBack></dsl-navbar>
		<view class="">
			<swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000"
				changing-class="swiper_image" style="height: 400rpx;">
				<swiper-item class="swiper_image" style="height: 100%;" v-for="(item,index) in tourData.banners"
				 @click="preview(index,tourData.banners)">
					<image :src="item" mode="aspectFill" class="swiper_image" style="height: 100%;"></image>
				</swiper-item>
			</swiper>
			<view class="padding rowsb bg-white">
				<view>
					<view class="text-lg text-bold towlineshow shop_title text-black">{{tourData.name ||'暂无'}}</view>
					<view class="text-red margin-top-xs text-bold text-lg">￥{{tourData.price ||'0'}}</view>
				</view>

				<view class="button_share">
					<button type="default" open-type="share" class="button_share_1"></button>
					<view class="text-center">
						<image src="/static/shop/icon_fenxiang.png" mode="" class="icon_share"></image>
						<view>分享</view>
					</view>
				</view>

			</view>
			<view style="line-height: 70rpx ;" class="padding-left bg-white">
				<view class="text-gray">{{tourData.daysExplain ||'暂无'}}</view>
				<view class="align-center">
					<image src="/static/shop/icon_tuandui.png" mode="" class="shop_icon"></image>
					<text class="text-sm margin-left-sm text-gray">团队人数上限 {{tourData.numberLimit ||'0'}} 人</text>
				</view>
				<view class="align-center">
					<image src="/static/shop/icon_baomng.png" mode="" class="shop_icon"></image>
					<text class="text-sm margin-left-sm text-gray">报名年龄限制：{{tourData.ageLimit ||'0'}}岁</text>
				</view>
				<!-- 		<view class="align-center">
					<image src="/static/shop/icon_hanjia.png" mode="" class="shop_icon"></image>
					<text class="text-sm margin-left-sm text-gray" style="color: #2CD5C3;">寒假开放12-25岁报名</text>
				</view> -->
				<view class="align-center">
					<image src="/static/shop/icon_jihedidian.png" mode="" class="shop_icon"></image>
					<text class="text-sm margin-left-sm">集合地点： {{tourData.startLocaton}}</text>
				</view>
				<view class="align-center">
					<image src="/static/shop/icon_jihedidian.png" mode="" class="shop_icon"></image>
					<text class="text-sm margin-left-sm">解散地点： {{tourData.endLocation}}</text>
				</view>
			</view>
		</view>
		<view class="padding bg-white margin-tb flex rowsb">
			<view v-for="(item,index) in titleList" :key="index" @click="num = item.id">
				<view :class="{active_title:item.id == num}">{{item.title}}</view>
				<view class="active_heng" :class="{'opacity':item.id == num}"></view>
			</view>
		</view>
		<view class="bg-white padding">
			<view v-html="hotContent" v-if="num==1"></view>
			<!-- <uParse :content="hotContent " v-if="num==1"></uParse> -->
			<view v-html="tripContent" v-if="num==2"></view>
			<view v-html="costContent" v-if="num==3"></view>
			<view v-html="noticeContent" v-if="num==4"></view>
		</view>
		<view class="shop_submit_bottom">
			<view class="text-center" @click="navigation">
				<image src="/static/shop/icon_jihedidian.png" style="width: 34rpx;height: 34rpx;"></image>
				<view style="color: #4E5050;">更多路线</view>
			</view>
			<view class="shop_submit" @click="submitOreder">
				我要报名
			</view>
		</view>
	</view>
</template>

<script>
	import uParse from '@/components/gaoyia-parse/parse.vue'
	import Vue from 'vue'
	import {
		preview
	} from '../../common/updataImgList.js'
	import {
		get_tourDetail
	} from '../../common/path.js'
	export default {
		components:{
			// uParse
		},
		data() {
			return {
				num: 1,
				titleList: [{
						title: '路线亮点',
						id: 1
					},
					{
						title: '行程简介',
						id: 2
					},
					{
						title: '费用说明',
						id: 3
					},
					{
						title: '行前必看',
						id: 4
					}
				],
				detailId: 1, //详情id
				tourData: {}, //详情内容

				hotContent: '', //路线亮点
				tripContent: '', //行程简介
				costContent: '', //费用说明
				noticeContent: '', //行前必看
			}
		},
		//生命周期函数
		onReady() {},
		onLoad(option) {
			this.detailId = option.id
			// this.detailId = uni.getStorageSync('shopId')
			this.get_tourDetail()
		},
		onShow() {},
		methods: {
			//详情
			get_tourDetail() {                      
				let addressId = uni.getStorageSync('addressId')
				let data = {
					id: this.detailId,
					cityCode: addressId
				}
				this.Http.POST(get_tourDetail, data)
					.then((res) => {
						if (res.code == 0) {
							this.tourData = res.data
							 uni.setStorageSync('mpShareTitle',res.data.name)
							this.hotContent = res.data.hot.replace(/\<img/gi,'<img style="width:100%;height:auto;display:inline-block;margin:10rpx auto;"') //路线亮点
							this.tripContent = res.data.trip.replace(/\<img/gi,'<img style="width:100%;height:auto;display:inline-block;margin:10rpx auto;"')
							this.costContent = res.data.cost.replace(/\<img/gi,'<img style="width:100%;height:auto;display:inline-block;margin:10rpx auto;"')
							this.noticeContent = res.data.notice.replace(/\<img/gi,'<img style="width:100%;height:auto;display:inline-block;margin:10rpx auto;"')

						}
					})
			},
			//图片预览
			preview(index, array) {
				console.log(index ,array);
				preview(index, array)
			},
			//导航
			navigation() {
				uni.reLaunch({
					url:'/pages/home/index'
				})
				
				return
				uni.chooseLocation({
					success: function(res) {
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
					}
				});
			},
			//跳转下单
			submitOreder() {
				let price = this.tourData.price

				console.log('[价格]', price);
				uni.navigateTo({
					url: '../order/orderSubmit?id=' + this.tourData.id + '&price=' + price
				})
			}
		},
		computed: {},
		components: {}
	}
</script>

<style>
	.swiper_image {

		width: 750rpx;
		height: 347rpx;
		background: #EEEEEE;
		opacity: 1;
	}

	.icon_share {
		width: 32rpx;
		height: 32rpx;
	}

	.shop_title {
		width: 600rpx;
	}

	.shop_icon {
		width: 28rpx;
		height: 28rpx;
	}

	page {

		background: #F3F2F5;
	}

	.active_title {
		color: #2CD6C5 !important;
	}

	.active_heng {
		height: 5rpx;
		background: linear-gradient(180deg, #29D5CB 0%, #37DEB2 100%);
		opacity: 1;
		border-radius: 4rpx;
		opacity: 0;
	}

	.opacity {
		opacity: 1;
	}

	.shop_introduce_image {
		width: 690rpx;
		height: 307rpx;
		opacity: 1;
		background-color: #EEEEEE;
		border-radius: 12rpx;
		margin-bottom: 30rpx;
	}

	page {
		padding-bottom: 120rpx;
	}

	/* 底部按钮 */
	.shop_submit_bottom {
		background-color: white;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		justify-content: space-between;
		padding: 15rpx 30rpx;
	}

	.shop_submit {
		width: 319rpx;
		height: 72rpx;
		background: linear-gradient(180deg, #2AD5CA 0%, #37DEB2 100%);
		opacity: 1;
		border-radius: 39rpx;
		line-height: 72rpx;
		text-align: center;
		color: white;
	}

	.button_share {
		position: relative;
		width: 100rpx;
		height: 100rpx;
		font-size: 28rpx;
	}

	.button_share_1 {
		width: 100rpx;
		height: 100rpx;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		opacity: 0;
		z-index: 99;
	}
</style>
